<template>
    <div  class="card">
        <div class="h">
            <van-checkbox class="checkbox"  v-model="checked"></van-checkbox> 批号<b>65388172662</b> 南疆阿克苏 手摘棉</div>
        <ul class="cs" @click="go">
            <li>
                <h5>等级</h5>
                <b>31+</b>
            </li>
            <li>
                <h5>长度</h5>
                <b>27.5+</b>
            </li>
            <li>
                <h5>强力</h5>
                <b>26+</b>
            </li>
            <li>
                <h5>马值</h5>
                <b>2.6-4.5</b>
            </li>
            <li>
                <h5>回潮</h5>
                <b>1.5-</b>
            </li>
            <li>
                <h5>含杂</h5>
                <b>1.5-</b>
            </li>
            <li>
                <h5>整齐度</h5>
                <b>80+</b>
            </li>
        </ul>
        <div class="ck">
            <div class="f3">
                
                <font class="max8"><font class="c999">收货地：</font>江苏苏州张家港保税区10号仓库</font>
            </div>
            <div class="f3">                
                <font class="max8"><font class="c999">买家：</font>思域集团有限公司</font>
            </div>
        </div>
        <div class="price">
            <div class="time">
                <h5>最晚交货时间</h5>
                <h4>2018-8-21</h4>
            </div>
            <div class="f3">
                <h4>采购中</h4>
                50吨
            </div>
            <div>
                <button  @click="go"><i class="num">3</i> 我要报价</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            batch: Object
        },
        data() {
            return {
                checked: false
            }
        },
        methods: {
            go() {
                
                this.$router.push('/baojia/1')
            }
        },
    }
</script>

<style scoped lang='less'>
    .card {
        background: #fff;
        margin: 5px 0 0 0;
        padding: 5px 10px 0 10px;
        text-align: left;
        font-size: 16px;
        position: relative;
        overflow: hidden;
        .checkbox{
                position: relative;
                display: inline;
                 
            }
        .price {             
            width: 100%;
            display: flex;
            height: 3.5em;
            line-height: 3.5em;
            text-align: center;   
            
            .time{
                color: #ff5500;
                line-height: 1.2em;
                h5{
                    font-size: 12px;
                    margin-top: 0.5em;
                }
            }       
            >div {  
                flex: 2;               
                border: 1px solid #f0f0f0;
                border-right: 0;
            }
            >div:last-child{
                border-right: 1px solid #f0f0f0;
            }
            .f3{
                flex: 3;
                line-height: 1.4em;
                font-size: 14px;
                color:#333;
                h4{
                    margin-top: 0.5em;
                    color: red;
                    font-size: 16px;
                }
            }
            button{
                outline: 0;
                border: 0;
                width: 100%;
                background: #2cb98e;
                color: #fff;
                position: relative;
                .num{
                    border-radius: 50%;
                    height: 1.5em;
                    width: 1.5em;
                    font-size: 12px;
                    color: #fff;
                    background: #ff5500;
                    top: 1em;
                    right: 0.6em;
                    display: block;
                    line-height: 1.5em;
                    position: absolute;

                }  
            }
        }
        .h {
            padding-left: 10px;
        }
        >div {
            position: relative;
            h1 {
                position: absolute;
                top: 3px;
                left: 0;
                width: 4px;
                height: 1em;
                font-size: 16px;
                background: #2dbaba;
                padding: 0;
                margin: 0;
            }
        }
        .cs {
            margin-top: 10px;
            color: #333;
            display: flex;
            width: 100%;
            font-size: 16px;
            li {
                flex: 1;
                border: 1px solid #f2f2f2;
                text-align: center;
                border-right: 0;
            }
            li:last-child {
                border-right: 1px solid #f2f2f2;
            }
            h5 {
                color: #333;
                height: 2em;
                line-height: 2em;
            }
            b {
                font-weight: normal;
                font-size: 16px;
                font-weight: bold;
            }
        }
        .ck {
            display: flex;
            height: 3em;
            line-height: 3em;
            text-align: center;
            font-size: 14px;
            
            .max8{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                max-width: 12em;
                display: inline-block;
            }
            >div{
                border: 1px solid #f2f2f2;
                border-top: 0;
                border-right: 0;
                
                 
            }
            >div:last-child{
                border-right: 1px solid #f2f2f2;
                
            }
            .f4 {
                flex: 4;
            }
            .f3 {
                flex: 3;
            }
        }
    }
</style>